<template>
  <div>
    <div id="app">
      <vue-particles id="tsparticles" @particles-loaded="particlesLoaded" url="http://foo.bar/particles.json" />

      <vue-particles id="tsparticles" @particles-loaded="particlesLoaded" :options="{
        background: {
          color: {
            value: '#0d47a1'
          }
        },
        fpsLimit: 120,
        interactivity: {
          events: {
            onClick: {
              enable: true,
              mode: 'push'
            },
            onHover: {
              enable: true,
              mode: 'repulse'
            },
          },
          modes: {
            bubble: {
              distance: 400,
              duration: 2,
              opacity: 0.8,
              size: 40
            },
            push: {
              quantity: 4
            },
            repulse: {
              distance: 200,
              duration: 0.4
            }
          }
        },
        particles: {
          color: {
            value: '#ffffff'
          },
          links: {
            color: '#ffffff',
            distance: 150,
            enable: true,
            opacity: 0.5,
            width: 1
          },
          move: {
            direction: 'none',
            enable: true,
            outModes: 'bounce',
            random: false,
            speed: 6,
            straight: false
          },
          number: {
            density: {
              enable: true,
            },
            value: 80
          },
          opacity: {
            value: 0.5
          },
          shape: {
            type: 'circle'
          },
          size: {
            value: { min: 1, max: 5 }
          }
        },
        detectRetina: true
      }" />
    </div>
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
      class="demo-ruleForm" status-icon>
      <h3>智慧实验室管理平台</h3>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password" type="password" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="btn-login" @click="submitForm(ruleFormRef)">
          登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/useUserStore'

// 粒子背景
const particlesLoaded = async container => {
    console.log("Particles container loaded", container);
};

// 表单校验
const ruleFormRef = ref()
const ruleForm = reactive({
  username: "",
  password: ""
})
// 表单校验
const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
})
// 按钮登录
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (ruleForm.username === "admin") {
        handleLogin1()
      } else {
        handleLogin2()
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

// 登录
const { changeUser } = useUserStore()
const router = useRouter()
const handleLogin1 = () => {
  // 设置localStorage 管理员权限
  changeUser({
    "id": 1,
    "username": "admin",
    "password": "123",
    "role": {
      "roleName": "管理员",
      "roleType": 1,
      "rights": [
        "/index",
        "/user-manage",
        "/user-manage/list",
        "/right-manage",
        "/right-manage/rolelist",
        "/right-manage/rightlist",
        "/lab-manage",
        "/lab-manage/lablist",
        "/lab-manage/addlab",
        "/book-manage",
        "/book-manage/auditlist",
        "/book-manage/booklist",
        "/book-manage/addbook"
      ]
    }
  })
  router.push("/")
}
const handleLogin2 = () => {
  // 设置localStrorage 教师权限
  changeUser({
    "id": 2,
    "username": "cha",
    "password": "123",
    "role": {
      "roleName": "教师",
      "roleType": 2,
      "rights": [
        "/index",
        "/book-manage",
        "/book-manage/booklist",
        "/book-manage/addbook"
      ]
    }
  })
  router.push("/")
}
</script>

<style lang="less" scoped>
.el-form {
  width: 500px;
  height: 300px;
  text-align: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 2px 2px 5px black;
  color: white;
  z-index: 999;

  h3 {
    margin-bottom: 30px;
    font-size: 40px;
    font-weight: 600;
  }

  :deep(.el-form-item__label) {
    color: white;
  }

  .btn-login {
    margin-left: 64px;
  }
}
</style>
